<template>
  <div class="brand">
    <project-nav-bar></project-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        @click="itemClick(item)"
        v-for="item in bannerList"
        :key="item.id"
      >
        <img class="imgs" :src="item.app_list_pic_url" alt="" />
        <div class="brand-main">
          <span class="title">{{ item.name }}</span>
          <span class="price">{{ item.floor_price | priceFilter }}</span>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getBrandList } from "@/network/brand";
import ProjectNavBar from "./children/ProjectNavBar";
import {Toast} from 'vant'
export default {
  components: {
    ProjectNavBar,
  },
  data() {
    return {
      page: 1,
      bannerList: [],
      loading: false,
      finished: false,
      id: null,
    };
  },
  filters: {
    priceFilter(val) {
      return val + "元起";
    },
  },
  methods: {
    getBrandLists() {
      getBrandList({
        page: this.page,
      }).then((res) => {
        console.log(res);
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
          duration: 500,
        });
        this.page++;
        this.loading = false;
        this.bannerList.push(...res.data);
        if (this.page > res.total) {
          this.finished = true;
        }
      });
    },
    onLoad() {
      this.getBrandLists();
    },
    itemClick(item) {
      this.id = item.id;
      this.$router.push({
        path: "/project",
        query: {
          id: this.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brand {
  .imgs {
    width: 100%;
  }
  .brand-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bolder;
    color: #fff;
    text-align: center;
    .title {
      padding-right: 5px;
      border-right: 2px solid #fff;
    }
    .price {
      margin-left: 5px;
    }
  }
}
</style>